<template>
    <div>
        <div class="rushBox">
           <div class="goodsImg"><img :src="imgUrl(deviceData.icon)" alt=""></div>
            <div class="title"><span>{{deviceData.name}}</span></div>
            <div class="info">
                <span :class="roomstatus==0?'delClass':''">在线：<span :style="deviceData.online==1?'color: #00FF00;':'color: red;'">{{deviceData.online==1? '在线' : '离线'}}</span></span>
                <span :class="roomstatus==0?'delClass':''">状态：<span :style="deviceData.status==1?'color: #33CCFF;':'color: #FFFF00;'">{{deviceData.status==1? '工作中' : '空闲'}}</span></span>
            </div>
            <div class="button">
                <el-button :disabled="roomstatus==0 || deviceData.online==0 || deviceData.name=='中控'?true:false" type="text" class="button" @click="startWork(deviceData.uuid)">开始工作</el-button>
                <el-button :disabled="roomstatus==0 || deviceData.online==0|| deviceData.name=='中控'?true:false" type="text" class="button" @click="stoptWork(deviceData.uuid)">结束工作</el-button>
                
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import {sendMqttMsg } from '@/utils/mqttClient'
  export default {
    name: 'deviceList',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
       
      }
    },
    props:{
        deviceData:{
            type:Object,
            default:{}
        },
        roomstatus:{
            type:Number,
            default:0
        }
    },
    computed: {},
    created() {
        
    },
    
    methods: {
        imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
    startWork(uuid){
        
        var worker_dict = {"uuid": uuid, "status": 1} 
        sendMqttMsg('/device/work', JSON.stringify(worker_dict))
        this.deviceData.status = 1
        console.log("开始工作")
    },
    stoptWork(uuid){
        
        var worker_dict = {"uuid": uuid, "status": 0} 
        sendMqttMsg('/device/work', JSON.stringify(worker_dict))
        this.deviceData.status = 0
        console.log("停止工作")
    }
    }
  }
  </script>
  <style lang="scss" scoped>
        .delClass{
            text-decoration: line-through;
        }
       .rushBox{
        width: 230px;
        height: 280px;
        display: flex;
        flex-direction: column;
        // justify-content: flex-start;
        // align-items: flex-start;
        justify-content: center;
        // align-items: center;
        border: 1px rgb(213,213,213) solid;
        // cursor:pointer;
        text-align: center;
        

        // background-color: rgb(243,243,243);
        .goodsImg{
            img{
                height: 140px;
                width: 200px;
                
            }
        }
        .title{
            width: 230px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 15px;
            // font-weight: 500;
            /* 文字间距 */
            letter-spacing: 3px;
            margin: 20px 0;
            // text-align: left;
            // margin-left: 15px;
            
            span{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            
        }
        .info{
            width: 230px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            font-size: 12px;
            // font-weight: 500;
            /* 文字间距 */
            letter-spacing: 3px;
            text-align: center;
            // margin: 20px 0;
        }
        .button{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 20px;
            // display: flex;
            //     flex-direction: row;
            // width: 100%;
            // justify-content: flex-start;
            // align-items:flex-start;
            .money{
                color: red;
                font-size: 25px;
                margin: 20px 0;
               
            }
            
            
        }
       }
  </style>
  